<template>
  <div>
    <el-card style="margin-bottom: 10px">
      <span>选择指标：</span>
      <el-select v-model="value" placeholder="选择指标" style="margin-right: 5px">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
    </el-card>
    <el-card>
      <el-collapse v-for="item in tableData">
        <el-collapse-item :title="item.content">
          <el-collapse v-for="items in item.child">
            <el-collapse-item :title="items.content" style="margin-left: 30px">
              <div style="margin-left: 15px" v-for="content in items.child">
                <span>{{ content.content }}</span>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-collapse-item>
      </el-collapse>
    </el-card>


  </div>
</template>

<script>
import request from "@/urils/request";

export default {
  name: "Criterion",
  data() {
    return {
      tableData: [],
      options: [],
      value: 1
    }
  },
  methods: {
    getData(value) {
      request.get('/criterion/selectTree/'+ value).then(res => {
        if (res.code === '200') {
          this.tableData = res.data
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    loadTemplate() {
      request.get('/criterion/templateList').then(res => {
        if (res.code === '200') {
          for (let i in res.data) {
            this.options.push({
              value: res.data[i].id,
              label: res.data[i].name
            })
          }
        }
      })
    }
  },
  created() {
    this.getData(1)
    this.loadTemplate()
  },
  watch:{
    value: function (newVal, oldVal){
      this.getData(newVal)
    }
  }
}
</script>

<style scoped>

</style>